{%extends 'layout.admin.html'%}
{%block content%}
{% load authfilters %}

<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css"/>
 
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h1 class="page-title">Free Excel Web Browser</h1>
        <h4 class="seo-h1"> 
        Free Online Excel Viewer: Preview XLSX Files Instantly Without Downloads​​

Quickly view Excel files in your browser with our ​​free online XLSX viewer​​ – no software installation or downloads required. Instantly ​​preview Excel spreadsheets​​ by uploading files under 2MB or pasting storage URLs via our simple API. Perfect for users needing fast access to spreadsheet data on any device, anywhere.

Our ​​web-based Excel preview tool​​ eliminates security risks from unknown downloads and saves storage space. Simply drag-and-drop files into the browser interface or integrate with our ​​developer-friendly API​​ (https://tool.freefonts1001.com/excel/display?url={EXCEL_URL}) for seamless workflow integration. Generate ​​shareable preview links​​ that enable team collaboration without requiring recipients to have Excel installed.
        </h4>
      </div>
    </div>
  </div>
</div>

<div class="page-body">
    <div class="container-xl">
        <div class="row row-cards">
             <div class="col-md-6">
                <div class="card">
                  <div class="card-body">
                    <h3 class="card-title">Upload Your Excel File</h3>
                    <form class="dropzone" id="dropzone-custom" action="/excel/upload" autocomplete="off" novalidate>
                      <div class="fallback">
                        <input name="file" type="file"/>
                      </div>
                      <div class="dz-message">
                        <h3 class="dropzone-msg-title">Drop files here to upload</h3>
                        <span class="dropzone-msg-desc">Supports .xlsx Files Under 2MB Only </span>
                      </div>
                    </form>
                  </div>
                </div>
             </div>
             <div class="col-md-6">
                <div class="card">
                    <div class="card-body" id="url-list">
                        <h4>1、API Document</h4>
                        <div>
                            <pre><code>{{host}}/excel/display?url={EXCEL_URL}</code></pre>
                        </div>
                        <h4>2、Upload Excel on Left-side</h4>
                        <div>
                            <pre><code>Example <a class="text-reset" target="_blank" href="{{host}}/excel/display?url={{host|quote:'/dist/demo.xlsx'}}">{{host}}/dist/demo.xlsx</a></code></pre>
                        </div>
                    </div>
                </div>
             </div>
       </div>
    </div>
</div>

<style type="text/css">
.dropzone {
    border: var(--tblr-border-width) dashed var(--tblr-border-color) !important;
    color: var(--tblr-secondary) !important;
    padding: 1rem !important;
}
</style>

<script type='text/javascript'>

function get_html(url) {
    var displayUrl = '/excel/display?url='+encodeURIComponent(url); // url
    var html = '<pre><code><a class="text-reset" target="_blank" href="'+displayUrl+'">'+url+'</a></a></code></pre>';
    return '<div>'+html+'</div>';
}

    Dropzone.options.dropzoneCustom = {
        paramName: 'file',
        maxFilesize: 2,
        acceptedFiles: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        init: function(){
            this.on('complete', function(ret) {
                if (ret.status === 'success') {
                    var data = eval('('+ret.xhr.response+')')
                    if (data['status'] == 200) {
                        var html = get_html(data['url']); 
                        $('#url-list').append(html);
                    }
                }
            });
        }
    };
</script>
{%endblock%}
